<template>
  <div id="footer-nav" v-show="bottomNavIsShow">
      <ul>
        <li @click="switchTo(1)"><icon name="icon-nav-index" :scale="2"></icon></li>
        <li @click="switchTo(2)"><icon name="icon-nav-menu" :scale="2.2"></icon></li>
        <li @click="switchTo(3)"><icon name="icon-nav-mine" :scale="2.2"></icon></li>
      </ul>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'BottomNav',
  methods : {
    switchTo(index){
      switch(index.toString()){
        case '1':
          this.$router.push('/');
          break;
        case '2':
          this.$router.push('/Menu');
          break;
        case '3':
          this.$router.push('/Mine');
          break;
      }
    },
  },
  computed: {
    ...mapGetters([
      'bottomNavIsShow',
    ])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#footer-nav{
  width: 100%;
  height: 48px;
  -webkit-box-shadow:inset 0 0 1px #282f37;
  -moz-box-shadow:inset 0 0 1px #282f37;
  box-shadow:inset 0 0 1px #282f37;
  background-color: #001c2d;
  position: fixed;
  bottom: 0;
  z-index: 2;
}

#footer-nav ul{
  width: 100%;
  height: 100%;
}

#footer-nav ul li{
  width: 33%;
  height: 100%;
  float: left;
  text-align: center;
}

#footer-nav ul li svg{
  margin-top: 15px;
  color: #B1B1B1;
}
</style>
